{% extends "layout.html" %}
{% load static %}
{% block css_m %}
    {% load myfilter %}
    <style>
        .test_model_content,
        .sym_content,
        .test_content {
            margin-top: 3px;
        }

        #feedback {
            font-size: 1.4em;
        }

        .selectable .ui-selecting {
            background: #FECA40;
        }

        .selectable .ui-selected {
            background: #F39814;
            color: white;
        }

        .selectable .ui-unselecting {

        }

        .selectable .ui-unselected {

        }
    </style>
    <link type="text/css" rel="stylesheet" href="{% static 'css/jquery-ui.min.css' %}">
{% endblock %}
{% block js_m %}
    <script type="text/javascript" src="{% static 'js/jquery-ui.min.js' %}"></script>
{% endblock %}

{% block content_body %}
    <div class="page-jumbotron center-block" style="width: 800px">
        <h1>{{ result.test_obj.pid.name }}<small>{{ result.test_obj.pid.get_sex_display }} {{ result.test_obj.pid.age }}岁
            检查时间：{{ result.test_obj.test_date }}</small>
        </h1>
    </div>
    <div class="container center-block" style="width: 1000px">

        <div class="panel panel-default" style="width: 100%">
            <div class="panel-heading">
                <h3 class="panel-title">已捕获的截图
                    <a class="btn btn-sm btn-warning" id="check_img" style="margin-left: 5px">图像查看模式</a>
                    <a class="btn btn-sm btn-default" id="chose_img" style="margin-left: 5px">图像选择模式</a>
                </h3>
            </div>
            <div class="panel-body">


                <div class="row">

                    {% for each in result.image_paths %}
                        {% if each.im_path %}
                            <div class="col-sm-2 col-md-2 selectable">
                                <div class="thumbnail">

                                    <img data-src="holder.js/100%x100%" alt="鼻道镜检查" class="modal_image"
                                         src="/image/{{ each.im_path }}" data-holder-rendered="true"
                                         style="height: 100%; width: 100%; display: block;">
                                    <div class="caption">

                                        <p style="text-align: center">时间：{{ each.im_path|path_name }}</p>


                                    </div>
                                </div>
                            </div>
                        {% else %}
                            <div class="col-sm-2 col-md-2 selectable">
                                <div class="thumbnail">
                                    <img data-src="holder.js/100%x100%" alt="鼻道镜检查" class="modal_image"
                                         src="/image/{{ each }}" data-holder-rendered="true"
                                         style="height: 100%; width: 100%; display: block;">
                                    <div class="caption">

                                        <p style="text-align: center">时间：{{ each|path_name }} </p>


                                    </div>
                                </div>
                            </div>
                        {% endif %}


                    {% endfor %}

                </div>
            </div>
            <div class="panel-footer"><a class="btn btn-warning" id="conf_image">确 定</a></div>
        </div>

    </div>


    <div class="panel-body center-block" style="width: 800px">

        <form method="post" action="/test_report/{{ result.test_obj.test_id }}/edit.html/" novalidate>
            {% csrf_token %}
            {% for field in result.form_add %}
                {% if field.label == '检查治疗项目' %}
                    <div class="form-group">
                        <label>{{ field.label }}</label>
                        {{ field }}
                        <a class="test_content btn btn-primary">鼻道镜检查</a>
                        <a class="test_content btn btn-danger">排毒膏</a>
                        <a class="test_content btn btn-warning">修复膏</a>
                        <a class="test_content btn btn-success">巩固膏</a>
                        <a class="test_content btn btn-default">熏蒸</a>
                        <a class="test_content btn btn-default">鼻窦按摩</a>
                        <a class="test_content btn btn-default">鼻腔清洗</a>
                        <a class="btn btn-link" id="test_clean">清除输入</a>
                        <span class="error_msg">{{ field.errors.0 }}</span>

                    </div>
                {% elif field.label == '本次症状' %}
                    <div class="form-group">
                        <label>{{ field.label }}</label>
                        {{ field }}
                        <a class="sym_content btn btn-primary">鼻塞</a>
                        <a class="sym_content btn btn-warning">喷嚏</a>
                        <a class="sym_content btn btn-warning">流涕</a>
                        <a class="sym_content btn btn-warning">头痛</a>
                        <a class="sym_content btn btn-default">头晕</a>
                        <a class="sym_content btn btn-default">失眠</a>
                        <a class="sym_content btn btn-default">夜醒</a>
                        <a class="sym_content btn btn-default">打鼾</a>
                        <a class="sym_content btn btn-default">呼吸费力</a>
                        <a class="sym_content btn btn-default">胸闷气短</a>
                        <a class="sym_content btn btn-default">记忆力减退</a>

                        <a class="btn btn-link" id="sym_clean">清除输入</a>
                        <span class="error_msg">{{ field.errors.0 }}</span>

                    </div>
                {% elif field.label == '报告人' %}
                    <div class="hidden">
                        <label>{{ field.label }}</label>
                        {{ field }}

                    </div>
                    <div class="form-group">
                        <a class="btn btn-primary" id="reporter_sign">报告人签名</a>
                        <label id="reporter_label"></label>
                    </div>
                {% elif field.label in '客户id 检查结果id 检查id 试用/已购买' %}
                    <div class="hidden">
                        <label>{{ field.label }}</label>
                        {{ field }}
                    </div>

                {% else %}
                    <div class="form-group">
                        <label>{{ field.label }}</label>
                        {{ field }}
                        <span class="error_msg">{{ field.errors.0 }}</span>
                    </div>
                {% endif %}
            {% endfor %}



            <div class="row center-block">

                <div class="row center-block" style="margin-top: 5px">

                    <button id="confimit" style="width:385px" type="submit" class="btn btn-primary" id="sbm"
                            disabled="disabled">提交
                    </button>
                    <a style="width: 380px" href="/customer/{{ result.test_obj.pid.pid }}/details.html/"
                       class="btn btn-default" role="button">返回</a>


                </div>
            </div>

        </form>

    </div>









{% endblock %}

{% block content_bottom %}
    {#模态对话框#}

    <div class="modal fade " id="add-modal_id" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true"
         style="z-index: 10000">
        <div class="modal-dialog modal-lg" style="width: 1000px">
            <div class="modal-content">
                <div class="modal-header">

                    <h4 class="modal-title" id="myModalLabel">
                        查看图片
                    </h4>
                </div>

                <div class="modal-body">
                    <img id="show_image" src="" style="width: 800px; height: 600px"/>

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" id="m_close">关闭
                    </button>

                </div>

            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <div class="modal fade " id="conf" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true"
         style="z-index: 10000">
        <div class="modal-dialog modal-lg" style="width: 1000px">
            <div class="alert alert-danger" role="alert">
                <div class="modal-content">
                    <div class="modal-header">

                        <h2 class="modal-title" id="myModalLabel">
                            图片保存确认：
                        </h2>
                    </div>

                    <div class="modal-body">
                        <h4 style="text-align: center"><strong id="warning_msg">已选择保存如下截图，未选择的截图将被全部删除，是否继续？！</strong></h4>
                        <div class="row" id="img_list_chosen">

                        </div>

                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" id="img_conf" style="margin-left: 60px">继续
                        </button>
                        <button type="button" class="btn btn-default" id="conf_close">取消
                        </button>

                    </div>

                </div><!-- /.modal-content -->
            </div>
        </div><!-- /.modal -->
    </div>
    <script>

        var imgSelected = []
        $(function () {
            $(".selectable").selectable(
                {
                    distance: 1,
                    selected: function (event, ui) {
                        if ($(ui.selected).hasClass('selectedfilter')) {
                            $(ui.selected).removeClass('selectedfilter');
                            $(ui.selected).removeClass('ui-selected');
                            var x = $($(ui.selected).children("img")[0]).attr("src");
                            $.each(imgSelected, function (idx, obj) {
                                if (obj === x) {
                                    imgSelected.splice(idx, 1)
                                }
                            })

                            // do unselected stuff
                        } else {
                            $(ui.selected).addClass('selectedfilter');
                            $(ui.selected).addClass('ui-selected');
                            // do selected stuff
                            var m = $($(ui.selected).children("img")[0]).attr("src");
                            if (m) {
                                imgSelected.push(m)
                            }


                        }
                    },
                    unselected: function (event, ui) {
                        $(ui.unselected).removeClass('selectedfilter');
                    }
                }
            );


            $("#chose_img").on("click", function () {
                $(this).removeClass('btn-default').addClass('btn-warning');

                $("#check_img").removeClass('btn-warning').addClass('btn-default');

                $(".selectable").selectable(
                    {
                        distance: 0,


                    }
                );
            });
            $("#check_img").on("click", function () {
                $(this).removeClass('btn-default').addClass('btn-warning');

                $("#chose_img").removeClass('btn-warning').addClass('btn-default');
                $(".selectable").selectable(
                    {
                        distance: 1,


                    })
            });


            $("#id_test_result").after(
                '<a class="test_model_content btn btn-primary" id="test_model">模板</a><a class="test_model_content btn btn-default" id="test_clear">清除</a>'
            )


            $("#test_model").on("click", function () {
                $.ajaxSetup({

                    data: {csrfmiddlewaretoken: '{{ csrf_token }}'},

                });
                $.ajax({
                    url: '{% url "test_report_model" %}',
                    type: 'GET',

                    success: function (arg) {
                        $("#id_test_result").val(arg['model'])
                    }
                })
            });
            $("#test_clear").on("click", function () {
                $(this).prev().prev().val('')
            })
            $('.modal_image').click(function () {

                $('#add-modal_id').modal('show');

                var path_ = $(this).attr('src');

                $('#show_image').attr('src', path_);


            });
            $('#conf_image').click(function () {

                $('#conf').modal('show');
                var obj = ''
                if(imgSelected.length !==0){
                    $.each(imgSelected, function (idx, item) {
                        obj += '<div class="col-sm-2 col-md-2"> <div class="thumbnail"><img data-src="holder.js/100%x100%" alt="鼻道镜检查" class="modal_image" src="' + item + '" data-holder-rendered="true" style="height: 100%; width: 100%; display: block;"></div></div>'
                    })
                    $("#img_list_chosen").html(obj)
                }else{
                    $('#warning_msg').html("<strong>警告：您未选择任何截图。点击确定后，所有截图将被删除。是否继续？！</strong>")
                }

                
            });

            $("#img_conf").on("click", function () {

                $.ajaxSetup({

                    data: {csrfmiddlewaretoken: '{{ csrf_token }}'},

                });

                $.ajax({
                    url: '{% url "save_and_del_img" %}',
                    type: 'POST',
                    data: {
                        'img_to_save': JSON.stringify(imgSelected),
                        'test_id': "{{ result.test_id }}",
                    },
                    traditional: true,//防止深度序列化
                    cache: false,
                    async: false,

                    dataType: 'JSON',
                    success: function (arg) {

                        if (arg['ret']) {
                            $('#conf').modal('hide');
                            $(".selectable div img").each(function (idx, obj) {
                                var imgPath = $(obj).attr("src")
                                
                                if($.inArray(imgPath, imgSelected)===-1){
                                    $($(obj).parent().parent()).empty()
                                }

                            })
                        }else{
                            $("#img_list_chosen").html(arg['msg'])
                        }

                    }
                })
            });

            $("#conf_close").click(function () {

                $('#conf').modal('hide');
            });

            $("#m_close").click(function () {

                $('#add-modal_id').modal('hide');
            });

            $(".test_content").on("click", function () {
                if ($('#id_test_treatment').val().indexOf($(this).text()) === -1) {
                    if ($('#id_test_treatment').val()) {
                        $('#id_test_treatment').val($('#id_test_treatment').val() + " " + $(this).text())
                    } else {
                        $('#id_test_treatment').val($('#id_test_treatment').val() + $(this).text())
                    }
                }
            });
            $("#test_clean").on("click", function () {

                $('#id_test_treatment').val("")
            });
            $(".sym_content").on("click", function () {
                if ($('#id_symptom').val().indexOf($(this).text()) === -1) {
                    if ($('#id_symptom').val()) {
                        $('#id_symptom').val($('#id_symptom').val() + " " + $(this).text())
                    } else {
                        $('#id_symptom').val($('#id_symptom').val() + $(this).text())
                    }
                }
            });
            $("#sym_clean").on("click", function () {

                $('#id_symptom').val("")
            });
            $("#reporter_sign").on("click", function () {
                if ($('#id_test_result').val()) {

                    $("#confimit").removeAttr("disabled")
                    $('#reporter_label').text("{{ request.tracer.user_name }}")
                    $('#id_test_reporter').val("{{ request.tracer.id }}")


                    var tid = $('#id_tid').val()
                    var test_result = $('#id_test_result').val()
                    var test_reporter = "{{ request.tracer.id }}"
                    $.ajaxSetup({

                        data: {csrfmiddlewaretoken: '{{ csrf_token }}'},

                    });
                    $.ajax({
                            url: '{% url "save_test_report" %}',
                            type: 'POST',
                            data: {
                                'tid': tid,
                                'test_result': test_result,
                                'test_reporter': test_reporter,

                            },
                            dataType: 'JSON',
                            success: function (arg) {
                                var new_tid = arg['tid']

                                if (arg["add_element"]) {

                                    var new_html = "<option value=" + new_tid + ">检查单编号：" + new_tid + "</option>"

                                    $("#id_tid").append(new_html)
                                }

                                $("#id_tid").val(new_tid)


                            }

                        }
                    )
                } else {

                    $('#reporter_label').text("请先填写报告！")
                }

            });
        })

    </script>
{% endblock %}